<template>
  <view class="read-more">
    <view class="express">
      <view class="info">
        <view  :class="{ hide: !isInfo,content:!isInfo }" ref="content" :style="[{'-webkit-line-clamp':line}]">
           <rich-text :nodes="content"></rich-text>
        </view>
        <view class="tips" @click="showinfo" v-if="!isInfo && isContentLongEnough">
          <u-icon
            name="arrow-down"
            size="14"
            :color="color"
            label="展开"
            labelPos="left"
            :labelColor="labelColor"
            labelSize="14"
          ></u-icon>
        </view>
      </view>
      <view class="tips hidebtn" @click="showinfo" v-if="isInfo">
        <u-icon
          name="arrow-up"
          size="14"
          :color="color"
          label="收起"
          labelPos="left"
          :labelColor="labelColor"
          labelSize="14"
        ></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 't-readmore',
  props: {
    color: {
      type: String,
      default: '#000',
    },
    labelColor: {
      type: String,
      default: '#FA312A',
    },
    content: {
      type: String,
      default: '1111',
    },
    line: {
      type: String,
      default: '4',
    },
    iSinfo: {
          type: Boolean, // 你可以根据实际需要选择不同的类型
          default: false, // 设置默认值为 false，表示默认折叠状态
        },
  },
  data() {
    return {
      isInfo: false,
    };
  },

  computed: {
    isContentLongEnough() {
      return this.content.length > 20;
    },
  },
  methods: {
    showinfo() {
      if(this.iSinfo){
        this.isInfo = !this.isInfo;
      }else{
        this.$emit('read-more', this.isInfo)
      }
      // this.isInfo = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.read-more {
  // 展开收起
  .express {
    position: relative;
    margin: 0 17rpx;
    .info {
      display: flex;
      flex-direction: column;
     color: #999999;
     line-height: 46rpx;
     letter-spacing: 4rpx;
      .content {
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        font-size: 14px;
        font-family: PingFang;
        font-weight: 400;
        color: #999999;
        line-height: 46rpx;
        letter-spacing: 4rpx;
      }
      .tips {
        width: 140rpx;
        height: 40rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
        position: absolute;
        bottom: 5rpx;
        right: 16rpx;
      }
    }
  }

  // 收起 按钮
  .hidebtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    color: #0078FF;
    font-size: 28rpx;
    position: absolute;
    right: 16rpx;
    bottom: 0rpx;
    line-height: 46rpx;
    letter-spacing: 4rpx;
    
  }

  // 展开 文字
  .hide {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-family: PingFang;
    font-weight: 400;
    color: #999999;
    line-height: 46rpx;
    letter-spacing: 4rpx;
   
  
  }
}
</style>
